main {
  color: #333;
  section {
    margin: 50px 0;
    .section-title {
      font-size: 2.8em;
      font-weight: bolder;
      .section-title-sec {
        font-size: 0.3em;
        line-height: normal;
      }
    }
    &.reply {
      .reply-list {
        list-style: none;
        padding-left: 0;
        .replier {
          margin-bottom: 20px;
          font-size: 1.4em;
        }
        .reply-content {
          font-size: 1em;
        }
      }
    }
    &.quickly-buy {
      height: 370px;
      display: flex;
      align-items: center;
      background:url("../img/quick-img.svg");
      > .quickly-container {
        h1 { font-weight: 700;}
        > .row > .col.border-right {
          border-right-color: #000 !important;
        }
      }
    }
    &.customer {
      .teacher-list {
        max-width: 1030px;
        margin: 40px auto;
      }
      figure.teacher {
        position: relative;
        &:hover {
          .teacher-info {
            transform: translateY(0);
            opacity: 1;
          }
        }
        .teacher-info {
          background-color: rgba(41,56,86,0.86);
          color: #fff;
          position: absolute;
          width: 100%;
          bottom: 0;
          transform: translateY(20%);
          opacity: 0;
          left: 0;
          transition: 400ms;
          padding: 0.6em;
          .title {
            margin-bottom: 0;
          }
        }
      }
      .swiper-container-quick-buy {
        width: 1000px;
        height: 400px;
        .swiper-slide {
          transition: 300ms;
          transform: scale(0.8);
          &.swiper-slide-active {
            transform: scale(1);
          }
        }
      }
    }
    &.hero {
      background: url("../img/banner.png") center no-repeat;
      padding: 80px 0;
      margin-top: 0;
      .pro-list {
        .pro-item {
          cursor: pointer;
          &:hover {
            transform: translateY(-15px);
            box-shadow: 3px 3px 10px 2px rgba(0,0,0,.1);
            background-color: #fff;
            .hide-txt {opacity: 1;transform:translateY(-30px)}
            img {transform: translateY(-35px) scale(0.75)}
            .main-txt {transform: translateY(-55px) scale(0.9);}
            .know-more {transform: translateY(10px); opacity: 0;}
          }

          transition: 0.3s;
          height: 480px;
          text-align: center;
          background: url("../img/wps-bg.png") center no-repeat;
          > * {transition: 0.3s;}
          > img {
            margin-top: 77px;
          }
          .hide-txt {
            opacity: 0;
            margin-top: 0;
          }
          .know-more{
            display: inline-block;
            font-size: 12px;
            line-height:20px;
            transition: .1s;
            transform: translateY(-25px);
          }
        }
      }
    }
    &.intro {
      .slide-wrapper {
        width: 700px;
        margin-right: 40px;
        .swiper-effect {
          width: 700px;
        }

      }
      .effect-slide-desc-wrapper {
        .service-info-desc {
          >div.service-txt {
            display: none;
            &:first-child {display: block;}
          }
        }
        .effect-navi-groups {
          display: flex;
          .effect-navi {
            position: relative !important;
            top: unset;
            left: unset;
            margin: unset;
            --swiper-navigation-size: 30px;/* 设置按钮大小 */
            --swiper-navigation-color: $text-normal;/* 单独设置按钮颜色 */
            &:active,&:focus {
              outline: 0;
              border: 0;
            }
            &.swiper-button-prev {
              margin-right: 30px;
            }
          }
        }
      }

    }
  }
}

.vip-footer {
  background: url("../img/footer-bg.jpg") no-repeat center;
}

.fix-icon {
  position: relative;
  top: -0.1rem;

  svg {
    font-size: 0.85em
  }
}

@media (max-width: 576px) {
  main {
    section.hero {
      background-color: #eee;
    }
    section.intro {
      .slide-wrapper {
        width: auto;
        margin-right: 0;
        .swiper-effect {
          width: 100%;
        }
      }

      .effect-slide-desc-wrapper .service-info-desc {
        > div.service-txt {
          padding-top: 20px;
          height: 220px;
        }
      }
    }
    section.quickly-buy {
      .quickly-container h1 {
        font-size: 1.25rem;
      }
    }
  }
}
@media (max-width: 768px) {
  main {
    section.intro {
      .slide-wrapper {
        width: auto;
        margin-right: 5%;
        .swiper-effect {
          width: 100%;
        }
      }
      .effect-slide-desc-wrapper {
        .service-info-desc {
          .service-txt {
            height: 240px;
          }
        }
        .btn-groups {
          transform: translateX(-100%);
          width: 105%;
        }
      }
    }
    section.customer {
      .swiper-container-quick-buy {
        width: 100%;
        height: auto;
      }
    }
  }
}
